<template>
    <div class="home">
       <div class="main">
         <div class="list-main">
           <div class="list">
              <p>AAPL</p> 
              <p class="p1">99.99</p>
              <button>+0.666%</button>
           </div>
            <div class="list">
              <p>GOOG</p> 
              <p class="p1">88.99</p>
              <button>+0.16%</button>
           </div>
            <div class="list">
              <p>FB</p> 
              <p class="p1">75.26</p>
              <button>+1.66%</button>
           </div>
         </div>
         <div class="photo-main">
           <!-- <router-link> -->
               <div class="php">
                   1
               </div>
               <!-- <span>1</span>
               <span>2</span>
               <span>3</span> -->
           <!-- </router-link> -->
         </div>
       </div>
       <div class="footer">
         <p>Yahoo!</p>
         <span @click="ban">666</span>
       </div>
    </div>
</template>
<script>
export default {
    name:"home",
    props:{

    },
    components:{

    },
    data(){
        return {

        }
    },
    computed:{

    },
    methods:{
       ban(){
           this.$router.push({path:"/good"})
       }
    },
    created(){

    },
    mounted(){

    }
}
</script>
<style scoped>
     .home{
         width: 100%;
         height: 100%;
     }
     .home .main{
         width: 100%;
         height: 90%;
     }
     .home .main .list-main{
         width: 100%;
         height: 380px;
         background:#000;
     }
     .home .main .photo-main{
         width: 100%;
         height: 236px;
         background: rgb(36, 35, 35);
     }
     .list{
         width: 100%;
         height: 60px;
         border-bottom: 1px solid #fff;
         line-height: 60px;
     }
     .list p{
         color: white;
         margin-left:10px;
         float: left;
     }
     .list .p1{
         float: left;
         margin-left: 150px;
     }
     .list button{
         width:110px;
         height:32px;
         background: rgb(52, 209, 52);
         border: none;
         color: white;
         margin-left: 10px;
         font-size: 16px;
         border-radius: 3px;
     }
     .photo-main span{
         /* position: absolute;
         left:20px;
         top:70%; */
         float: left;
     }
     .php{
         text-align: center;
         line-height: 230px;
     }
     .home .footer{
         width: 100%;
         height: 50px;
         background: rgb(36, 35, 35);
         line-height: 50px;
         border-top:2px solid #000;
         /* position: absolute;
         top:93.5%; */
     }
     .footer p{
         color: white;
         margin-left:10px;
         float: left;
     }
     .footer span{
         color: white;
         float: left;
         margin-left: 270px;
     }
</style>